<template>
	<view class="category-container" :style="{height: `${windowHeight}px`}">
		<view class="c-header">
			<u-search v-model="queryParams.name" placeholder="请输入分类名称" :showAction="true" 
			actionText="搜索" :animation="true" @custom="getList" @clear="getList"></u-search>
			<u-icon v-if="$auth.hasPermi('product:category:create')" @click="handleEdit" name="plus-circle" size='22' ></u-icon>
		</view>
		<!-- 门店选择 -->
		<select-store @confirm="handleStoreConfirm"></select-store>
		<!-- 内容为空 -->
		<view class="empty-container" v-if="!list.length">
			<u-empty mode="data"></u-empty>
		</view>
		<!-- 列表 -->
		<view class="c-list" v-else>
			<uni-collapse ref="collapse">
				<uni-collapse-item v-for="item in list" :key="item.id" :title="item.name" :name="item.name"
					:thumb="item.picUrl" :show-arrow="item.children ? true : false">
					<template v-slot:title>
						<uni-list>
							<uni-list-item :title="item.name" thumb-size="base" :thumb="item.picUrl">
								<template v-slot:footer>
									<view class="collapse-footer-icon">
										<!-- <u-icon v-if="item.isShow && $auth.hasPermiOr(['product:category:update', 'product:category:delete'])" @click.native.stop="handlemenu(item)" name="list" size="22"></u-icon> -->
										<view class="collapse-footer-menu-icon">
											<u-icon v-if="$auth.hasPermi('product:category:update')" @click.native.stop="handleEdit(item.id)" name="edit-pen-fill" size="24" style="margin-right: 6px;" class="aedit-pen-fill"></u-icon>
											<u-icon v-if="$auth.hasPermi('product:category:delete')" @click.native.stop="handleDel(item.id)" name="trash-fill" size="22"></u-icon>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</template>
					<!-- 分类内容 -->
					<view class="collapse-list">
						<uni-list height="100%">
							<uni-list-item v-for="t in item.children" :key="t.id" :title="t.name"
								thumb-size="base" :thumb="t.picUrl">
							<template v-slot:footer>
								<view class="collapse-footer-icon">
									<!-- <u-icon v-if="t.isShow && $auth.hasPermiOr(['product:category:update', 'product:category:delete'])" @click="handlemenu(t)" name="list" size="22"></u-icon> -->
									<view  class="collapse-footer-menu-icon">
										<u-icon v-if="$auth.hasPermi('product:category:update')" @click="handleEdit(t.id)" name="edit-pen-fill" size="24" style="margin-right: 6px;" class="aedit-pen-fill"></u-icon>
										<u-icon v-if="$auth.hasPermi('product:category:delete')" @click="handleDel(t.id)" name="trash-fill" size="22"></u-icon>
									</view>
								</view>
							</template>
							</uni-list-item>
						</uni-list>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import { getCategoryList, deleteCategory } from '@/api/mall/category.js'
	import { handleTree } from '@/utils/tree'
  import { toast } from '@/utils/common'
	import { mapGetters } from 'vuex'
	export default {
		name: 'categoryIndex',
		data() {
			return {
				queryParams: {
					name: '',
					storeId: undefined
				},
				list: [],
			}
		},
		computed: {
			 ...mapGetters([
				'selectedStore',
			]),
		  windowHeight() {
		    return uni.getSystemInfoSync().windowHeight;
		  },
		},
		onShow() {
			this.queryParams.storeId = this.selectedStore?.id;
			this.getList()
		},
		methods: {
			async getList() {
				const { data } = await getCategoryList(this.queryParams);
				data.forEach(item => item.isShow = true);
				this.list = [];
				this.list = handleTree(data, 'id', 'parentId');
			},
			handlemenu(item) {
				item.isShow = false;
			},
			handleEdit(id) {
				this.$tab.navigateTo('/pages/mall/product/category/categoryForm?id=' + (id == null ? '' : id))
			},
			handleDel(id) {
				this.$modal.confirm('是否删除所选中数据？').then(async () => {
				  await deleteCategory(id);
					toast('删除成功');
					await this.getList();
					this.$nextTick(() => {
						this.$refs.collapse.resize();
					})
				})
			},
			async handleStoreConfirm() {
				this.queryParams.storeId = this.selectedStore?.id;
				await this.getList();
				this.$nextTick(() => {
					this.$refs.collapse.resize();
				})
			}
		}
	}
</script>

<style scoped >
	.category-container {
	  display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}
	.c-header {
		display: flex;
		align-items: center; 
		gap: 12px;
	}
	.empty-container {
	  flex: 1; /* 占据剩余空间 */
	  display: flex;
	  justify-content: center; /* 水平居中 */
	  align-items: center; /* 垂直居中 */
	},
	.c-list {
		flex: 1;
	  overflow-y: auto; 
		margin-top: 8px;
	}
	.collapse-footer-icon, .collapse-footer-menu-icon {
		display: flex;
	}
	::v-deep .uicon-edit-pen-fill {
		margin-right: 12px;
	}
	.collapse-list {
		height: 100%;
		padding-left: 14px;
		box-sizing: border-box;
	}
</style>